<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @change="searchChange" />
    <table-index :table="table" @loadData="loadData" />
  </div>
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/carTboxVehicle/importExcel" download-import="/车载box导入模板.xlsx" @ok="loadData" />
  <!-- 修改 -->
  <car-info-edit-modal ref="editModal" @ok="loadData" />
</template>

<script setup name="CarBoxInstallList">
  import carInfoEditModal from './form/index.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { getCarTboxVehicleList, getCheckCarId, getDelete } from '@/api/asset/carTbox'
  import { onMounted, ref, reactive, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'

  import useNavigate from '@/hooks/useNavigate'

  const editModal = ref(null)

  const { navigateTo } = useNavigate()
  const imoportRef = ref(null)
  import { usePageDict } from '@/hooks/useDict'
  const carTboxVehicleDict = usePageDict('carTboxVehicleDict')

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
      { label: '车架号', prop: 'vinLike', type: 'a-input' },
      { label: '设备sn/id', prop: 'vehicleSnLike', type: 'a-input' },
      { label: '设备code', prop: 'vehicleCodeLike', type: 'a-input' },
      {
        label: '设备供应商',
        prop: 'vehicleFirm',
        type: 'a-select',
        options: carTboxVehicleDict.vehicleFirmEnums,
      },
      {
        label: '设备状态',
        prop: 'vehicleStatus',
        type: 'a-select',
        options: carTboxVehicleDict.vehicleStatusEnums,
      },
    ]
  })
  // 接口参数（不包含page信息）
  const queryParam = reactive({})

  // table 配置
  const table = useTable({
    columns: [
      { title: '设备sn/id', dataIndex: 'vehicleSn', width: 160, fixed: 'left' },
      { title: '设备code', dataIndex: 'vehicleCode', width: 160 },
      { title: '设备供应商', dataIndex: 'vehicleFirm', width: 100 },
      { title: '车牌号', dataIndex: 'licenseNo', width: 110 },
      { title: '车牌颜色', dataIndex: 'licenseNoColorName', width: 100 },
      { title: '车架号', dataIndex: 'vin' },
      { title: '车型', dataIndex: 'modelName' },
      { title: '设备状态', dataIndex: 'vehicleStatusName', width: 100 },
    ],
    operates: [
      {
        label: '编辑',
        // show: (record) => record.status == 0 || record.status == 1,
        permission: 'svms:asstes:device:car-box-install.edit',
        method: (record) => {
          editModal.value.show(record.id)
        },
      },
      {
        label: '删除',
        permission: 'svms:asstes:device:car-box-install.del',
        method: (record) => {
          confirmDelete(record)
        },
      },
      {
        label: '操作记录',
        permission: 'svms:asstes:device:car-box-install.operaterecords',
        method: (record) => {
          navigateTo(`/car-box-install/detail/${record.id}`, `${record.vehicleSn}-操作记录`)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:asstes:device:car-box-install.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        type: 'primary',
        permission: 'svms:asstes:device:car-box-install.add',
        mode: 'import',
        icon: 'plus',
        label: '新增',
        method: () => {
          editModal.value.show()
        },
      },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarTboxVehicleList)

  // 删除
  const confirmDelete = (record) => {
    let title = '是否确认删除'
    if (record.carId) {
      getCheckCarId({ carId: record.carId }).then((res) => {
        if (res.result.existControl) {
          title = '存在未结束的控车单，坚持删除吗'
        }
        confirmDeleteFn(record, title)
      })
    } else {
      confirmDeleteFn(record, title)
    }
  }
  const confirmDeleteFn = (record, title) => {
    Modal.confirm({
      title: title,
      cancelText: '取消',
      okText: '确认',
      onOk: () => {
        getDelete({ id: record.id }).then(() => {
          Message.success('删除成功')
          loadData()
        })
      },
    })
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped></style>
